<div id="controller" data-ng-controller="forecastController">
  <div class="row mb-1">
    <div class="col-auto">
      <div class="dropdown d-inline w-auto">
        <button bs-title="{{'Select panel sequence'|translate}}" class="form-control d-inline w-auto dropdown-toggle text-capitalize" data-ng-init="dict = {'I':'item', 'L':'location', 'C':'customer'};" id="selectseq" name="sequence" data-ng-value="sequence" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          {{ dict[sequence[0]]|translate }}{{(sequence).length > 1 ? "," : ""}}&nbsp;{{ dict[sequence[1]]|translate }}{{(sequence).length > 2 ? "," : ""}}&nbsp;{{ dict[sequence[2]]|translate }}&nbsp;&nbsp;<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'ILC'; savePreferences();">{{ dict['I']|translate }},&nbsp;{{ dict['L']|translate }},&nbsp;{{ dict['C']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'LIC'; savePreferences();">{{ dict['L']|translate }},&nbsp;{{ dict['I']|translate }},&nbsp;{{ dict['C']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'CLI'; savePreferences();">{{ dict['C']|translate }},&nbsp;{{ dict['L']|translate }},&nbsp;{{ dict['I']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'ICL'; savePreferences();">{{ dict['I']|translate }},&nbsp;{{ dict['C']|translate }},&nbsp;{{ dict['L']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'LCI'; savePreferences();">{{ dict['L']|translate }},&nbsp;{{ dict['C']|translate }},&nbsp;{{ dict['I']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'CIL'; savePreferences();">{{ dict['C']|translate }},&nbsp;{{ dict['I']|translate }},&nbsp;{{ dict['L']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'IL'; savePreferences();">{{ dict['I']|translate }},&nbsp;{{ dict['L']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'LI'; savePreferences();">{{ dict['L']|translate }},&nbsp;{{ dict['I']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'IC'; savePreferences();">{{ dict['I']|translate }},&nbsp;{{ dict['C']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'CI'; savePreferences();">{{ dict['C']|translate }},&nbsp;{{ dict['I']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'LC'; savePreferences();">{{ dict['L']|translate }},&nbsp;{{ dict['C']|translate }}</a>
          </li>
          <li>
            <a class="dropdown-item text-capitalize" href="#" data-ng-click="sequence = 'CL'; savePreferences();">{{ dict['C']|translate }},&nbsp;{{ dict['L']|translate }}</a>
          </li>
        </ul>
      </div>
      &nbsp;&nbsp;
      <div class="dropdown d-inline w-auto">
        <button bs-title="{{'Select panel measure'|translate}}" class="dropdown-toggle form-control d-inline w-auto text-capitalize" id="selectmeasure" name="measure" data-ng-value="measure" type="button" data-bs-toggle="dropdown"  aria-expanded="false">
        {{measures[measure].label}}&nbsp;&nbsp;<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li data-ng-repeat="m in measurelist | orderBy:'label'" data-ng-if="!m.computed">
            <a href="#" class="dropdown-item text-capitalize" data-ng-click="$parent.$parent.measure = m.name; savePreferences();">{{ m.label }}</a>
          </li>
        </ul>
      </div>
    </div>

    <div id="toolicons" class="col-auto ms-auto hor-align-right ver-align-middle">
      <form>
        <button class="btn btn-sm btn-primary" onclick="grid.showBucket()" data-bs-toggle="tooltip" data-bs-placement="top" title="{{'Configure time buckets'|translate}}">
          <span class="fa fa-clock-o"></span>
        </button>
        <button class="btn btn-sm btn-primary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true"
              data-bs-title="{{'Bookmark your favorite report configurations'|translate}}">
            <span class="fa fa-star"></span>
            </div>
        </button>
        <ul class="dropdown-menu dropdown-menu-end" id="favoritelist">
				    <li data-ng-repeat="(favname, fav) in preferences.favorites">
              <a class="dropdown-item" data-ng-click="openfavorite(favname, $event)">{{favname}}
				        <div style="float:right"><span class="fa fa-trash-o" data-ng-click="removefavorite(favname, $event)"></span></div>
              </a>
				    </li>
            <li>
                <a class="dropdown-item d-flex" >
                <button id="favoritesave" data-ng-click="savefavorite()" type="button" disabled class="flex-fill btn btn-primary btn-sm me-1 text-capitalize">{{'save'|translate}}</button>
                <input class="form-control form-control-sm" id="favoritename" oninput="favorite.check()" type="text" size="15">
                </a>
            </li>
        </ul>
        <button class="btn btn-sm d-none d-md-inline-block btn-primary" onclick="url = url_prefix + '/forecast/'; import_show('', undefined, true)">
          <span id="csvimport" data-bs-toggle="tooltip" data-bs-placement="top" title="" class="fa fa-arrow-up" data-bs-title="Import CSV or Excel file"></span>
        </button>
        <button class="btn btn-sm btn-primary" data-ng-click="showCustomizeGrid()" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{'Customize'|translate}}">
          <span class="fa fa-wrench"></span>
        </button>
        <button class="btn btn-sm d-none d-md-inline-block btn-primary" onclick="window.open('https://frepple.com/docs/' + version + '/user-interface/plan-analysis/forecast-editor.html')" data-bs-toggle="tooltip" data-bs-placement="top" title="{{'Help'|translate}}">
          <span class="fa fa-question"></span>
        </button>
      </form>
    </div>
  </div>

  <div class="row" id="data-row" data-ng-style="{'max-height': '50vh', 'height': datarowheight + 'px', 'min-height': '150px'}">
    <div class="col-sm-{{(12 / (sequence).length)}}" data-ng-repeat="panel in sequence track by $index" style="height: 100%">
      <div class="card" style="min-height: 100px; height: 100%;" data-ng-if="panel=='L'">
        <div class="card-header">
          <h5 class="card-title text-capitalize mb-0" translate>locations</h5>
        </div>
        <div class="card-body ps-0 pe-0 pt-2 pb-2" data-ng-style="{'overflow': 'auto', 'height': datarowheight - 31 + 'px'}">
          <div>
            <div id="locationstable" data-locationstable></div>
          </div>
        </div>
      </div>

      <div class="card" data-ng-model="items" style="min-height: 100px; height: 100%;" id="itemspanel" data-ng-if="panel=='I'">
        <div class="card-header">
          <h5 class="card-title text-capitalize mb-0" translate>items</h5>
        </div>
        <div class="card-body ps-0 pe-0 pt-2 pb-2" data-ng-style="{'overflow': 'auto', 'height':  datarowheight - 31 + 'px'}">
          <div class="">
            <div id="itemstable" data-itemstable></div>
          </div>
        </div>
      </div>

      <div class="card" style="min-height: 100px; height: 100%;" data-ng-if="panel=='C'">
        <div class="card-header">
          <h5 class="card-title text-capitalize mb-0" translate>customers</h5>
        </div>
        <div class="card-body ps-0 pe-0 pt-2 pb-2" data-ng-style="{'overflow': 'auto', 'height':  datarowheight - 31 + 'px'}">
          <div>
            <div id="customerstable" data-customerstable></div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="row">
    <div id="resize-handle" class="fa fa-bars handle col" style="display: block; text-align: center; clear: both;"></div>
  </div>

  <div class="row">
    <div class="col">
      <h1 id="detailtitle" style="text-transform: capitalize;">{{'forecast'|translate}}:
        <span data-ng-repeat="something in sequence">
          <span data-ng-if="$index > 0">&nbsp;-&nbsp;</span>
          <span data-ng-if="something=='I'">{{ selecteditem }}{{ selecteditemdescription }}
            <a data-ng-href='{{urlprefix}}/detail/input/item/{{ selecteditem | urlEncode }}/' onclick='event.stopPropagation()'><span class="fa fa-caret-right"></span></a>
          </span>
          <span data-ng-if="something=='L'">{{ selectedlocation }}{{ selectedlocationdescription }}
            <a data-ng-href='{{urlprefix}}/detail/input/location/{{ selectedlocation | urlEncode }}/' onclick='event.stopPropagation()'><span class="fa fa-caret-right"></span></a>
          </span>
          <span data-ng-if="something=='C'">{{ selectedcustomer }}{{ selectedcustomerdescription }}
            <a data-ng-href='{{urlprefix}}/detail/input/customer/{{ selectedcustomer | urlEncode }}/' onclick='event.stopPropagation()'><span class="fa fa-caret-right"></span></a>
          </span>
        </span>
        <span data-ng-if="loading" id="forecastcog" class="fa fa-cog fa-spin fa-fw"></span>
      </h1>
    </div>
  </div>

  <div class="row">
    <div class="col-auto">
      <span class="pull-left">
        <div class="form-inline">
          <button id="save" class="btn btn-primary" data-ng-click="save(false);" data-bs-toggle="tooltip" title="{{'Save changes to the database'|translate}}" disabled>
            <i data-ng-if="busy_saving" class="fa fa-spinner fa-spin"></i>
            {{'Save'|translate}}
          </button>
          <button id="undo" class="btn btn-primary" data-ng-click="undo()" data-bs-toggle="tooltip" title="{{'Undo changes'|translate}}" disabled>
            {{'Undo'|translate}}
          </button>
          <!--
          <input type="submit" data-ng-if="!(detaildata.attributes.forecast.forecastmethod == 'aggregate') && smallestbucket === buckettype" value="{{'Recalculate'|translate}}" id="recalculate" class="btn btn-primary" role="button" data-ng-show="showtab=='forecast'" data-ng-click="save(true)" data-bs-toggle="tooltip" title="{{'Simulate changes without saving'|translate}}" disabled>
          -->
        </div>
      </span>
    </div>
    <div id="tabs" class="col-auto form-inline ms-auto">
      <ul class="nav nav-tabs">
        <li class="nav-item" id="attributestab" role="presentation" data-ng-click="showtab='attributes'; savePreferences();">
          <a data-ng-class="{'nav-link': true, 'active': showtab=='attributes'}" style="text-transform: capitalize" translate>attributes</a>
        </li>
        <li class="nav-item" id="forecasttab" role="presentation" data-ng-click="showtab='forecast'; savePreferences();">
          <a data-ng-class="{'nav-link': true, 'active': showtab=='forecast'}" class="ui-tabs-anchor" style="text-transform: capitalize" translate>forecast</a>
        </li>
        <li class="nav-item" id="commentstab" role="presentation" data-ng-click="showtab='comments'; savePreferences();">
          <a  data-ng-class="{'nav-link': true, 'active': showtab=='comments'}" style="text-transform: capitalize" translate>comments</a>
        </li>
        <li class="nav-item" id="historytab" role="presentation" data-ng-click="showtab='history'; savePreferences();">
          <a data-ng-class="{'nav-link': true, 'active': showtab=='history'}" style="text-transform: capitalize" translate>history</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="row mb-3">
  <div class="col-12">
  <div id="attributedata" class="clear" data-ng-if="showtab=='attributes'">
    <div class="row" style="padding-top: 1em;">

      <div class="col-md-4 col-sm-12" data-ng-repeat="panel in sequence">

        <div class="card" data-ng-if="panel=='I'">
          <div class="card-header">
            <h5 class="card-title text-capitalize mb-0" translate>item</h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-borderless table-sm table-hover">
                <tr data-ng-repeat="attribs in detaildata.attributes.item">
                  <td>{{::attribs[0]}}:&nbsp;</td>
                  <td>{{::attribs[1]}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>

        <div class="card" data-ng-if="panel=='C'">
          <div class="card-header">
            <h5 class="card-title text-capitalize mb-0" translate>customer</h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-borderless table-sm table-hover">
                <tr data-ng-repeat="attribs in detaildata.attributes.customer">
                  <td>{{::attribs[0]}}:&nbsp;</td>
                  <td>{{::attribs[1]}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>

        <div class="card" data-ng-show="panel=='L'">
          <div class="card-header">
            <h5 class="card-title text-capitalize mb-0" translate>location</h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-borderless table-sm table-hover">
                <tr data-ng-repeat="attribs in detaildata.attributes.location">
                  <td>{{::attribs[0]}}:&nbsp;</td>
                  <td>{{::attribs[1]}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>

  <div id="commentsdata" class="clear" data-ng-show="showtab=='comments'">
    <div class="row">

      <div class="col">
        <div style="clear: both;">
          <input type="submit" role="button" id="commentitem" value="{{'new item comment'|translate}}" data-ng-click="commenttype='item';" aria-disabled="false" style="font-size:12px" data-ng-class="['btn','btn-primary','text-capitalize',{'active': commenttype=='item'}]"/>
          <input type="submit" role="button" id="commentitemlocation" value="{{'new item-location comment'|translate}}" data-ng-click="commenttype='itemlocation'" aria-disabled="false" style="font-size:12px" data-ng-class="['btn','btn-primary','text-capitalize',{'active': commenttype=='itemlocation'}]"/>
          <input type="submit" role="button" id="commentlocation" value="{{'new location comment'|translate}}" data-ng-click="commenttype='location'" aria-disabled="false" style="font-size:12px" data-ng-class="['btn','btn-primary','text-capitalize',{'active': commenttype=='location'}]"/>
          <input type="submit" role="button" id="commentcustomer" value="{{'new customer comment'|translate}}" data-ng-click="commenttype='customer'" aria-disabled="false" style="font-size:12px" data-ng-class="['btn','btn-primary','text-capitalize',{'active': commenttype=='customer'}]"/>
          <textarea class="form-control mt-2 mb-2" style="resize: vertical; width: 100%;" data-ng-show="commenttype" id="newcomment" rows="5" data-ng-model="newcomment" data-ng-change="changes = true" data-ng-model-options="{debounce: 300}"></textarea><br/>
          <span id="pastcomments" data-ng-if="detaildata.comments.length==0;" translate>No comments yet</span>
          <span id="pastcomments" data-ng-if="detaildata.comments.length>0;" data-ng-repeat="record in detaildata.comments">
            <hr>
            <h3>{{::record.user}}&nbsp;{{::record.type}}</h3>
            <span class="float_right">{{::record.lastmodified}}</span>
            <pre>{{::record.comment}}</pre>
          </span>
        </div>
      </div>

    </div>
  </div>

  <div id="historydata" class="clear" data-ng-show="showtab=='history'">
    <div class="row">

      <div class="col-md-12">
        <span id="history">
          <div data-ng-repeat="record in detaildata.history">
            <span style="font-weight: bold">{{::record.content_type}}&nbsp;:&nbsp;{{::record.object_id}}</span>
            <span class="float_right">{{::record.user }}&nbsp;:&nbsp;{{::record.action_time}}</span>
            <span>{{::record.change_message}}</span>
          </div>
        </span>
      </div>

    </div>
  </div>

  <div id="forecastdata" class="clear">
		<div class="row mb-3" data-ng-if="showtab=='forecast'">
			<div class="col-md-12">
				<div class="card" id="forecastgraph" style="height: 250px">
					<div data-display-forecast-graph data="detaildata.forecast"
						rows="rows"></div>
				</div>
			</div>
		</div>
		<div class="row mb-3" data-ng-show="showtab=='forecast'">
			<div class="col-md-12">
				<div class="panel" id="forecastgrid"
					style="backgound-color: transparent;">
					<div data-display-forecast-grid data="detaildata" grid="grid"
						rows="rows" measures="measures"></div>
				</div>
			</div>
		</div>
		<div class="row mb-3" data-ng-show="showtab=='forecast'">
      <div class="col-lg-8 col-md-12" style="max-width: 900px">
				<div class="card">
					<div class="card-header">
						<h5 class="card-title text-capitalize mb-0" data-translate>edit</h5>
					</div>
					<div class="card-body">
					  <table>
					  <tr>
					  <td style="vertical-align:top; padding: 15px">
					  <button id="applyedit" type="submit" data-ng-click="applyEdit()" class="btn btn-primary disabled" translate>Apply</button>
            </td>
						<td><form class="mb-3">
						   Update
						        <div class="dropdown" style="display:inline-block">
                    <button type="button" class="dropdown-toggle form-control d-inline w-auto" data-bs-toggle="dropdown"
                      id="editmeasure" name="editmeasure" aria-haspopup="true" aria-expanded="true"
                      style="min-width:200px">
                      {{measures[edit_measure].label}}&nbsp;&nbsp;<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="editmeasure">
                      <li data-ng-repeat="m in measurelist | orderBy:'label'" data-ng-if="m.editable">
                        <a class="dropdown-item" data-ng-click="$parent.$parent.edit_measure = m.name; changeEdit()" href="#" translate>{{m.label}}</a>
                      </li>
                    </ul>
                    </div>
                    &nbsp;from&nbsp;
                    <input id='editstartdate' type="date" class="form-control d-inline w-auto"
                      data-ng-model="edit_startdate" data-ng-change="changeEdit()"
                      style="background: white !important">
                    &nbsp;till&nbsp;
                    <input id='editenddate' type="date" class="form-control d-inline w-auto"
                      data-ng-model="edit_enddate" data-ng-change="changeEdit()"
                      style="background: white !important">
                  </form>
                  <div class="radio mb-3">
                    <label><input class="form-check-input nodirty align-text-bottom" type="radio" data-ng-model="edit_mode" name="optradio" value="0"  data-ng-change="changeEdit()">
                    Set to <input type="number" class="form-control d-inline" data-ng-model="edit_set" data-ng-change="changeEdit()" data-ng-focus="edit_mode=0" style="width:8rem; background: white !important"></label>
                  </div>
									<div class="radio mb-3">
										<label><input class="form-check-input nodirty align-text-bottom" type="radio" data-ng-model="edit_mode" name="optradio" value="1" data-ng-change="changeEdit()">
										Increase by <input type="number" class="form-control d-inline" data-ng-change="changeEdit()" data-ng-focus="edit_mode=1" data-ng-model="edit_inc" style="width:8rem; background: white !important"></label>
									</div>
                  <div class="radio mb-3">
                    <label><input class="form-check-input nodirty align-text-bottom" type="radio" data-ng-model="edit_mode" name="optradio" value="2" data-ng-change="changeEdit()">
                    Increase by <input type="number" class="form-control d-inline" data-ng-change="changeEdit()" data-ng-focus="edit_mode=2" data-ng-model="edit_inc_perc" style="width:3rem; background: white !important"> %</label>
                  </div>
                  </div>
								</td>
							</tr>
							</table>
						  <div class="col-12">
							<label for="comment">Comment:</label>
							<textarea class="form-control" rows="3" id="comment" ng-model="edit_comment"></textarea>
							</div>
					</div>
				</div>
			</div>
		<div class="col-md-4 col-md-12" style="max-width: 400px">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title mb-0 text-capitalize" data-translate>parameters</h5>
          </div>
          <div class="card-body">
            <table class="table table-borderless">
              <tr>
                <td data-translate style="white-space:nowrap">Forecast method
                </td>
                <td>
                  <div class="dropdown dropdown-submit-input" name="{{::'aggregate' |translate}}">
                    <button class="form-control dropdown-toggle d-inline w-auto" id="forecastmethod" name="forecastmethod" data-ng-value="detaildata.attributes.forecast.forecastmethod" type="button" data-bs-toggle="dropdown" data-ng-class="{'dirty-cell': initialmethod != detaildata.attributes.forecast.forecastmethod}" title="{{'Select forecast method, only possible at single item/location/customer level'|translate}}">
                      {{detaildata.attributes.forecast.forecastmethod |translate}}
                      &nbsp;&nbsp;
                      <span data-ng-if="!(detaildata.attributes.forecast.forecastmethod == 'aggregate')" class="caret"></span>
                    </button>
                    <ul data-ng-class="{'dropdown-menu': true, 'd-none': detaildata.attributes.forecast.forecastmethod == 'aggregate'}" id="forecastmethodul">
                      <li>
                        <a class="dropdown-item" name="{{'Automatic'|translate}}" data-ng-click=" detaildata.attributes.forecast.forecastmethod='automatic'; changes=(initialmethod != 'automatic') ? true : changes;" translate>
													Automatic
												</a>
											</li>
                      <li>
                        <a class="dropdown-item" name="{{'Constant'|translate}}" data-ng-click="detaildata.attributes.forecast.forecastmethod = 'constant'; changes= (initialmethod != 'constant') ? true : changes;" translate>Constant
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" name="{{'Trend'|translate}}" data-ng-click=" detaildata.attributes.forecast.forecastmethod='trend'; changes=(initialmethod != 'trend') ? true : changes" translate>Trend
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" name="{{'Seasonal'|translate}}" data-ng-click="detaildata.attributes.forecast.forecastmethod = 'seasonal'; changes= (initialmethod != 'seasonal') ? true : changes;" translate>Seasonal
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" name="{{'Intermittent'|translate}}" data-ng-click=" detaildata.attributes.forecast.forecastmethod='intermittent'; changes=(initialmethod != 'intermittent') ? true : changes;" translate>Intermittent
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" name="{{'Moving average'|translate}}" data-ng-click="detaildata.attributes.forecast.forecastmethod = 'moving average'; changes= (initialmethod != 'moving average') ? true : changes;" translate>Moving average
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" name="{{'Manual'|translate}}" data-ng-click=" detaildata.attributes.forecast.forecastmethod='manual'; changes=(initialmethod != 'manual') ? true : changes" translate>Manual
                        </a>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>

              <tr>
                <td translate style="white-space:nowrap">
                Selected forecast method
                </td>
                <td>
                {{ detaildata.attributes.forecast.forecast_out_method }}
                </td>
              </tr>

              <tr>
                <td translate style="white-space:nowrap">
                Estimated forecast error
                </td>
                <td>
                {{ detaildata.attributes.forecast.forecast_out_smape }}&nbsp;%
                </td>
              </tr>
            </table>
          </div>
        </div>
     </div>
</div>
</div>
</div>

<div id="popup2" class="modal" role="dialog" tabindex="-1" style="z-index: 10000">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-capitalize" data-ng-if="!databaseerrormodal" translate>unsaved changes</h5>
        <h5 class="modal-title text-capitalize" data-ng-if="databaseerrormodal" translate>database transaction failed</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" data-ng-if="!databaseerrormodal">
        <p translate>Do you want to save your changes first?</p>
      </div>
      <div class="modal-body" data-ng-if="databaseerrormodal" style="height: 350px; overflow: auto;"></div>
      <div class="modal-footer">
        <input type="submit" id="saveAbutton" role="button" data-ng-if="!databaseerrormodal" data-ng-click="modalcallback.resolve('save')" class="btn btn-primary" data-dismiss="modal" value="{{'Save'|translate }}">
        <input type="submit" id="cancelAbutton" role="button" data-ng-click="modalcallback.resolve('continue')" class="btn btn-primary" data-dismiss="modal" value="{{'Continue'|translate }}">
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function() {
    $("#data-row").resizable({
      handleSelector: "#resize-handle",
      resizeWidth: false,
      resizeHeight: true,
      onDrag: function(e, $el, opt) {
        datarowheight = $('#data-row').css('height');
        $('#data-row .panel').css('height', datarowheight);
        $('#data-row .panel>div:nth-child(2)').css('height', datarowheight.slice(0, -2) - 31 + 'px');
      }
    });

    $(window).bind('resize', function() {
      datarowheight = $('#data-row').css('height');
      $('#data-row .panel').css('height', datarowheight.slice(0, -2) + 'px');
      $('#data-row .panel>div:nth-child(2)').css('height', datarowheight.slice(0, -2) - 31 + 'px');
    });

    $('[data-bs-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
  });
</script>
</div> <!-- ng-controller end  -->
</div> <!-- ng-app end  -->
